import { useI18n } from '@/hooks/web/useI18n'
import { reactive, UnwrapRef } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'

const { t } = useI18n()
import { ActionButtonsTemplate } from '@/api/global/types'
import { useUserStore } from '@/store/modules/user'

const { required } = useValidator()

const userStore = useUserStore()

export default function (
  actionButtonsTemplate?: ActionButtonsTemplate,
  operatorList?: UnwrapRef<any>,
  countryOption?: UnwrapRef<any>
) {
  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('supplier.id'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'supname',
      label: t('supplier.supname'),
      search: {
        // hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'sup_type',
      label: t('supplier.sup_type'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        formItemProps: {
          rules: [required()]
        },
        componentProps: {
          options: [
            {
              label: '渠道供应商',
              value: 1
            },
            {
              label: '个人供应商',
              value: 2
            },
            {
              label: 'KOL',
              value: 3
            },
            {
              label: '网站',
              value: 4
            }
          ]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.suptype_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.suptype_value
          }
        }
      }
    },
    {
      field: 'phone',
      label: t('supplier.phone'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'email',
      label: t('supplier.email'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          // rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'qq',
      label: t('supplier.qq'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'wechat',
      label: t('supplier.wechat'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'whatsapp',
      label: t('supplier.whatsapp'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'dingtalk',
      label: t('supplier.dingtalk'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'country',
      label: t('supplier.country'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        formItemProps: {
          rules: [required()]
        },
        value: 101,
        componentProps: {
          filterable: true,
          options: countryOption
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.country_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.country_value
          }
        }
      }
    },
    {
      field: 'is_deal',
      label: t('supplier.is_deal'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '已成交过',
              value: 1
            },
            {
              label: '未成交过',
              value: 0
            }
          ]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.isdeal_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.isdeal_value
          }
        }
      }
    },
    {
      field: 'address',
      label: t('supplier.address'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'tags',
      label: t('supplier.tags'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'owner',
      label: t('supplier.owner'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: operatorList,
          // multiple: true,
          filterable: true,
          limit: 1
        },
        value: userStore.getUserInfo?.id
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.owner_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.owner_value
          }
        }
      }
    },
    {
      field: 'contact',
      label: t('supplier.contact'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'partner',
      label: t('supplier.partner'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        componentProps: {
          options: operatorList,
          multiple: true,
          filterable: true,
          limit: 1
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.partner_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.partner_value
          }
        }
      }
    },
    {
      field: 'att_path',
      label: t('supplier.att_path'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'remark',
      label: t('supplier.remark'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {}
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'create_time',
      label: t('supplier.create_time'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'updater',
      label: t('supplier.updater'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.updater_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.updater_value
          }
        }
      }
    },
    {
      field: 'update_time',
      label: t('supplier.update_time'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'action',
      width: (actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
